<template>
    <div class="content">
        <div :style="contentStyle"></div>
        <div class="point" :style="pointStyle">
            <div class="point-article"
                 v-for="(point,index) in item.articles" :key="index"
                 :style="pointArticleStyle(index)">
                <img :src=point.imageUrl alt="">
                <div  class="point-home">
                    <img :src="point.toolImageUrl" alt="">
                </div>
            </div>
        </div>
        <div class="article-content" v-show="isPoint">
            <div v-for="(optionArticle,cIndex) in articleOption[this.articleIndex]" :key="cIndex + 100"
                 class="option-main"
                 :class="optionArticle.isLos?'los':''"
                 :style="optionArticleStyle(optionArticle,cIndex)" :ref="'option' + cIndex">
                <img :src="optionArticle.imageUrl" alt="">
            </div>
            <div class="article-bottom" :style="articleBottomStyle">
                <div class="article-option"
                     v-for="(option,index) in item.articles" :key="index"
                     :style="optionStyle(option,index)"
                     @touchstart.stop="start(option,index,$event)"
                     @touchmove.stop="move(option,index,$event)"
                     @touchend.stop="end(option,index,$event)">
                    <img :src="option.toolImageUrl" alt="">
                </div>
            </div>
<!--            <Point v-if="isPointShow" :style="pointMoveStyle" class="fadeIn"/>-->
        </div>
    </div>
</template>

<script>
    import { mixins } from "@/common/mixins/assignmentMixins.js"
    import {mapActions} from "vuex";
    // import Point from "../point.vue"
    // eslint-disable-next-line no-unused-vars
    const $ = window.$
    export default {
        mixins: [mixins],
        data(){
            return{
                isMove: false,
                isPoint: false,
                isPointShow: false,
                pointMove: false,
                articleIndex: 0,
                articleOption: [[],[],[]]
            }
        },
        beforeMount() {
            if(!this.item.isFinish){
                if(this.index === this.activeIndex) this.onEnter()
            } else {
                this.isPoint = false
                return
            }
        },
        created() {
            for(let i = 0; i < this.item.optionArticleNameLists.length; i++){
                this.item.optionArticleNameLists[i].forEach(articleName=>{
                    this.item.articles.map(item=>{
                        this.$set(item,'touchCount',0)
                        if(articleName === item.name){
                            this.articleOption[i].push(JSON.parse(JSON.stringify(item)))
                        }
                    })
                })
            }
        },
        // components:{
        //     Point
        // },
        computed:{
            //背景图片样式
            contentStyle(){
                return {
                    height: '100%',
                    width: '100%',
                    background: "url(" + this.item.background + ")0 0/100% 100%",
                    filter: this.item.isFinish? '' : 'grayscale(1) contrast(40%)',
                    transition: "all 1s",
                }
            },
            //手势提示样式
            pointMoveStyle(){
                const ref = 'option0',
                    Left = this.$refs[ref][0].getBoundingClientRect().left,
                    Top = this.$refs[ref][0].getBoundingClientRect().top,
                    X = this.$refs[ref][0].offsetWidth,
                    Y = this.$refs[ref][0].offsetHeight
                return{
                    marginLeft: '0' ,
                    marginTop: this.pointMove ? '0' : '12%' ,
                    left: this.pointMove ? (Left + X/2) + 'px' : '',
                    top: this.pointMove ? (Top + Y/2) + 'px' : '',
                    transition: 'all 1s',
                    zIndex: '100'
                }
            },
            pointStyle(){
                const width = this.item.articles.length * 7
                return {
                    width: width + 'rem',
                    marginLeft: -(width / 2) + 'rem',
                    transform: this.isPoint? 'scale(0.5) translate(0rem, -13.5rem)' : this.item.isFinish ? 'scale(1) translate(0rem, 0rem)' : '',
                    transition: 'all 2s'
                }
            },
            //    提示页的样式
            pointArticleStyle(index){
                return function (index) {
                    return {
                        left: 3 + index * 7 + 'rem'
                    }
                }
            },
            //  底部样式
            articleBottomStyle(){
                const width = this.item.articles.length * 6
              return {
                  width: width + 'rem',
                  marginLeft: -(width / 2) + 'rem'
              }
            },
            //    样式选择
            optionStyle(option,index){
                return function (option,index) {
                    return {
                        left: 1 + index * 6 + 'rem',
                        transition: option.transition,
                        transform: "translate3d(" + option.moveX + "px," + option.moveY + "px,0)",
                        zIndex: option.zIndex,
                    }
                }
            },
            optionArticleStyle(optionArticle,cIndex){
                return function (optionArticle,cIndex) {
                    return {
                        left: (5 + cIndex * 2.2 - this.articleIndex) * 10 + '%',
                        transition: 'all 1s',
                        transform: optionArticle.isHighLight? 'scale(1.2)' : '',
                        opacity: optionArticle.isFinish? 0 : 1
                    }
                }
            },
        },
        methods: {
            onEnter:function () {
                clearTimeout(this.showHintImageTimeOut)
                this.showHintImageTimeOut = setTimeout(()=>{ this.isPoint = true },9000);
                setTimeout(()=>{this.isPointShow = true},10000)
                setTimeout(()=>{this.pointMove = true},12000)
            },
            start: function (option, index, event) {
                if (this.item.isFinish || option.isLos || option.isFinish) {
                    return
                }
                this.$set(option, 'x', event.changedTouches[0].clientX)
                this.$set(option, 'y', event.changedTouches[0].clientY)
                this.$set(option,'transition','all 0s')
                this.$set(option, 'zIndex',99)
                this.isPointShow = false
                this.updateOperated({questionIndex:this.questionIndex,param:this.index})
            },
            move: function (option, index, event) {
                this.$set(option, 'moveX',event.changedTouches[0].clientX - option.x)
                this.$set(option, 'moveY',event.changedTouches[0].clientY - option.y)
                const x = event.changedTouches[0].clientX,
                    y = event.changedTouches[0].clientY
                //循环意象 符合则成功
                for (let i = 0, len = this.articleOption[this.articleIndex].length; i < len; i++) {
                    const ref = 'option' + i,
                        minX = this.$refs[ref][0].getBoundingClientRect().left,
                        minY = this.$refs[ref][0].getBoundingClientRect().top,
                        maxX = minX + this.$refs[ref][0].offsetWidth,
                        maxY = minY + this.$refs[ref][0].offsetHeight,
                        picture = this.articleOption[this.articleIndex][i],
                        isCoord = x >= minX && x <= maxX && y >= minY && y <= maxY
                    if (isCoord) {
                        this.$set(picture, 'isHighLight', true)
                    } else {
                        this.$set(picture, 'isHighLight', false)
                    }
                }
            },
            end: function (option, index, event) {
                this.$set(option, 'moveX',0)
                this.$set(option, 'moveY',0)
                this.$set(option, 'transition','all 0.5s')
                this.$set(option, 'zIndex',98)
                setTimeout(()=>{
                    this.articleOption[this.articleIndex].map(item=>{
                        if(item.isHighLight) this.$set(item,'isHighLight',false)
                    })
                },0)
                const x = event.changedTouches[0].clientX,
                    y = event.changedTouches[0].clientY
                //循环意象 符合则成功
                for (let i = 0, len = this.articleOption[this.articleIndex].length; i < len; i++) {
                    const ref = 'option' + i,
                        minX = this.$refs[ref][0].getBoundingClientRect().left,
                        minY = this.$refs[ref][0].getBoundingClientRect().top,
                        maxX = minX + this.$refs[ref][0].offsetWidth,
                        maxY = minY + this.$refs[ref][0].offsetHeight,
                        picture = this.articleOption[this.articleIndex][i],
                        isCoord = x >= minX && x <= maxX && y >= minY && y <= maxY,
                        isTypeName = picture.name === option.name
                    if (isCoord) {
                        this.$set(picture, 'isHighLight', false)
                        if(isTypeName){
                            this.sucMusic()
                            this.$set(picture,'isFinish',true)
                        } else {
                            if(this.isSeedEntery){
            setTimeout(()=>{this.$emit('nextAssignment')},600)
                            } else {
                                this.$emit("losShow")
                            }
                            setTimeout(()=>{
                                this.$set(picture, "isLos", true)
                                picture.touchCount++
                            },100)
                            setTimeout(() => {
                                this.$set(picture, "isLos", false)
                            }, 1000)
                            this.addAnswer({
                                id: this.item.id,
                                type: false
                            })
                            if(picture.touchCount >= 3){
                                this.retryMusic()
                            } else {this.losMusic()}
                        }
                    }
                }
                //判断是否成功
                if (this.articleOption[this.articleIndex].filter(item => { return !item.isFinish }).length === 0) {
                    setTimeout(()=>{this.articleIndex++},500)
                    if(this.articleIndex === this.articleOption.length - 1){
                        setTimeout(()=>{
                            this.item.isFinish = true
                            this.isPoint = false
                        },1000)
                        if(this.isSeedEntery){
                            this.setSucLottiePlay()
                        }else {
                            setTimeout(()=>{
                                this.perfectMusic()
                            },500)
                        }
                        setTimeout(()=>{
                            this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                        },3000)
                this.addAnswer({
                            id: this.item.id,
                            type: true
                        })
                    }
                }
            },
            ...mapActions("mainStatus", ["setLoading"])
        },
        watch: {
            activeIndex: function (activeIndex) {
                if (this.index === activeIndex && !this.item.isFinish) this.onEnter()
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import '../../../common/stylus/content.styl'
    .point
        position absolute
        $center('WHLT', 30rem, 6rem)
        top 45%
        .point-article
            position absolute
            $center('WHLT', 6rem, 7rem)
            line-height 7rem
        .point-article img
            max-width 100%
            max-height 100%
            vertical-align middle
            filter drop-shadow(2px 0px #fff) drop-shadow(-2px 0px #fff) drop-shadow(0px -2px #fff) drop-shadow(0px 2px #fff)
        .point-home
            position absolute
            $center('WHLT', 5rem, 3rem)
            margin-top 4.5rem
            line-height 3rem
        .point-home img
            max-width 100%
            max-height 100%
            vertical-align middle
    .article-content
        opacity 0
        animation loading-in 1s ease-in-out 0.5s
        animation-fill-mode forwards
        .option-main
            position absolute
            $center('WHLT',8rem, 8rem)
            height auto
            line-height 8rem
        .option-main img
            max-width 100%
            max-height 100%
            vertical-align middle
        .article-bottom
            position absolute
            $center('WHLT',20rem, 5.6rem)
            top 65%
            margin-top 0
            background url($urlTitle + "assignment/image/page14/道具底背景.png") 0 0/100% 100%
            .article-option
                position absolute
                $center('WHLT', 4rem, 4rem)
                line-height 4rem
                margin-left 0
            .article-option img
                max-width 100%
                max-height 100%
                vertical-align middle
                filter drop-shadow(2px 0px #fff) drop-shadow(-2px 0px #fff) drop-shadow(0px -2px #fff) drop-shadow(0px 2px #fff) drop-shadow(2px 2px 1px #0000004a)
</style>
